/*
 * Copyright (C) 2014 - present Instructure, Inc.
 *
 * This file is part of Canvas.
 *
 * Canvas is free software: you can redistribute it and/or modify it under
 * the terms of the GNU Affero General Public License as published by the Free
 * Software Foundation, version 3 of the License.
 *
 * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
 * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
 * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
 * details.
 *
 * You should have received a copy of the GNU Affero General Public License along
 * with this program. If not, see <http://www.gnu.org/licenses/>.
 */

/*

## Default Accordion

```html
<div class="accordion" id="styleguide_demo_accordion1">

  <h3><a href="#">Section 1</a></h3>
  <div>
    <div class="styleguide-section__accordion-demo-element">
      Content for Section 1
    </div>
  </div>

  <h3><a href="#">Section 2</a></h3>
  <div>
    <div class="styleguide-section__accordion-demo-element">
      Content for Section 2
    </div>
  </div>

  <h3><a href="#">Section 3</a></h3>
  <div>
    <div class="styleguide-section__accordion-demo-element">
      Content for Section 3
    </div>
  </div>

</div>
<br/>
```


```js
$("div#styleguide_demo_accordion1").accordion({header: "h3"})
```

## Mini accordion

Default accordion a little big for your UI needs?

Simply add the **.ui-accordion--mini** class to the parent **.accordion** element, and you'll get a scaled-down version.

```html
<div class="accordion ui-accordion--mini" id="styleguide_demo_accordion2">

  <h3><a href="#">Section 1</a></h3>
  <div>
    <div class="styleguide-section__accordion-demo-element">
      Content for Section 1
    </div>
  </div>

  <h3><a href="#">Section 2</a></h3>
  <div>
    <div class="styleguide-section__accordion-demo-element">
      Content for Section 2
    </div>
  </div>

  <h3><a href="#">Section 3</a></h3>
  <div>
    <div class="styleguide-section__accordion-demo-element">
      Content for Section 3
    </div>
  </div>

</div>
<br/>
```

*/

// Custom Canvas branding for the accordion widget -- overwriting the defaults
// in the jQuery UI accordion styles

.ui-accordion {

  .ui-accordion-content {
    padding: 0;
    margin-top: 0;
    margin-bottom: 0;
    top: 0;
    border-color: $ic-border-color;
    &.ui-accordion-content-active {
      border-bottom-left-radius: $ic-border-radius;
      border-bottom-right-radius: $ic-border-radius;
    }
  }

  .ui-accordion-header {
    transition: background 0.2s, border 0.2s, border-radius 0.2s;
    padding: $ic-sp $ic-sp*2;
    margin-top: $ic-sp;
    border-radius: $ic-border-radius;

    &.ui-state-default {
      background: lighten($ic-color-neutral, 5%);
      box-shadow: none;
      border-color: $ic-border-light;
      border-bottom: 1px solid $ic-border-light;
      &.ui-state-focus {
        a { @include button-focus-light; }
      }
      &.ui-state-hover { background: $ic-color-neutral; }
      &.ui-state-active {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        border-color: $ic-brand-primary-darkened-5;
        border-bottom: 1px solid $ic-brand-primary-darkened-5;
        background: $ic-brand-primary;
        &.ui-state-focus {
          border-color: $ic-brand-primary-darkened-10;
          border-bottom: 1px solid $ic-brand-primary-darkened-10;
          a { @include button-focus-dark; }
        }
      }
    }

    a {
      transition: color 0.2s;
      padding: $ic-sp/2 $ic-sp;
      font-weight: normal;
      @include fontSize($ic-font-size--medium);
      text-shadow: none;
      line-height: 1;
      outline: none;
    }

    .ui-icon { left: $ic-sp - 2; }
  }

  // Style overwrites for "mini accordion", used in Pages sidebar
  &.ui-accordion--mini {
    .ui-accordion-header {
      margin-top: $ic-sp/3;
      padding: 0;
      border-radius: $ic-border-radius/2;
      a {
        @include fontSize(13px);
        padding: $ic-sp/2 $ic-sp $ic-sp/2 $ic-sp*2;

      }
      .ui-icon { left: $ic-sp/2 - 2; }
    }
    .ui-accordion-content {
      &.ui-accordion-content-active {
        border-bottom-left-radius: $ic-border-radius/2;
        border-bottom-right-radius: $ic-border-radius/2;
      }
    }
  }
}
